<template>
  <a-tabs :size="size">
    <a-tab-pane key="config" tab="配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="value">
            <a-form-item label="节点名称">
              <a-input placeholder="请输入节点名称" :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopVariableName">
            <a-form-item label="循环变量">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopVariableName')"
                @change="(e) => setCellValue(props, 'loopVariableName', e)"
                placeholder="请输入循环变量"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopCount">
            <a-form-item label="循环次数">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopCount')"
                @change="(e) => setCellValue(props, 'loopCount', e)"
                placeholder="请输入循环次数"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 8 : 24" ref="otherConfig">&nbsp;</a-col>
        </a-row>
        <a-col ref="table">
          <TableAndModal :batchAddBtn="false" :editor="editor" :cell="cell" :config="tableConfig" :direction="direction" @tableData="tableData" />
        </a-col>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  import TableAndModal from '../components/tableAndModal.vue';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
    colSpan: 8,
  });
  const tableConfig = reactive({
    title: '函数',
    keyPrefix: 'function',
    keys: ['function'],
    columns: [
      {
        title: '执行函数',
        dataIndex: 'function',
        slots: {
          customRender: 'function',
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 150,
        slots: {
          customRender: 'action',
        },
      },
    ],
  });
  const value = ref();
  const loopVariableName = ref();
  const loopCount = ref();
  const otherConfig = ref();
  const table = ref();
  const tabledata = ref();

  function tableData(datas) {
    tabledata.value = datas;
  }

  defineExpose({
    value,
    loopVariableName,
    loopCount,
    otherConfig,
    table,
    tabledata,
  });
</script>
